<template>
  <div class="home">
    <a-layout id="components-layout-demo-fixed">
      <a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
        <div class="logo">
          <img src="~assets/img/logo.png" alt="" />
        </div>
      </a-layout-header>
      <a-layout-content :style="{ padding: '0 50px', marginTop: '64px' }">
        <div
          :style="{
            background: '#fff',
            padding: '40px',
            minHeight: 'calc(100vh - 65px)',
          }"
        >
          <h1>求职小助手后台管理系统</h1>
          <p @click="login">管理员登录</p>
        </div>
      </a-layout-content>
      <a-layout-footer :style="{ textAlign: 'center' }">
        Ant Design ©2018 Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    login() {
      // 判断是否已登录，如果已登录，则直接进入页面
      // 如果还没登录，则进入登录页面
      // this.$router.push({path: '/login'})
      this.$router.push({ path: "/login" });
    },
  },
};
</script>

<style lang="less" scoped>
#components-layout-demo-fixed .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 24px 16px 0;
  float: left;
  text-align: center;
  line-height: 31px;
  img {
    width: 58px;
    height: 20px;
  }
}

h1 {
  margin-top: 150px;
  color: #002766;
  font-weight: 400;
  text-align: center;
  font-size: 60px;
  text-shadow: 10px 10px 10px rgba(0, 39, 102, 0.2);
}

p {
  margin-top: 30px;
  color: #002766;
  text-align: center;
  font-size: 30px;
}

p:hover {
  text-shadow: 10px 10px 10px rgba(0, 39, 102, 0.2);
  cursor: pointer;
}
</style>
